<template>
  <div class="app-container">

    <div class="app-container__section">
      <PlusSearch
        v-bind="getSearchBinds()"
        :columns="columns"
        v-model="searchForm"
      />
    </div>
    <div class="app-container__section">
      <PlusTable
        v-bind="getBinds()"
        :is-selection="false"
        :columns="columns"
      >
        <template #title>
          <table-title />
        </template>
        <template #toolbar>
          <ClockTimer :task="gGetList"/>
          <SearchAreaControl v-model="showSearchForm"/>
        </template>
        <template #plus-cell-action="scope">
          <el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">强退</el-button>
        </template>
      </PlusTable>
    </div>
  </div>
</template>

<script setup name="Online">
import { forceLogout, list as initData } from '@/api/monitor/online'
import { useTablePage } from '@/hooks/useTablePage.js'
import { PlusSearch, PlusTable } from 'plus-pro-components'

const { proxy } = getCurrentInstance()

const columns = computed(() => [
  {
    label: "会话编号",
    prop: "tokenId",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "登录账号",
    prop: "userName",
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "所属部门",
    prop: "deptName",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "主机",
    prop: "ipaddr",
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "登录地点",
    prop: "loginLocation",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "操作系统",
    prop: "os",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "浏览器",
    prop: "browser",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "登录时间",
    prop: "loginTime",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    },
    render: val=> proxy.parseTime(val)
  },
  {
    label: "操作",
    prop: "action",
    width: 160,
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  }
]);

// 搜索条件
const searchForm = ref({})

const {
  gRouteMeta,
  gTableData,
  gTotal,
  gLoadingStatus,
  gPageInfo,
  gReset,
  gGetList,
  gOnPageChange,
  gSelection,
  gOnSelectionChange,
  gShowSearchForm,
  gResetForm,
  gResetPage,
  getBinds,
  getSearchBinds
} = useTablePage(initData, {
  searchForm,
})


/** 强退按钮操作 */
function handleForceLogout(row) {
  proxy.$modal
    .confirm('是否确认强退名称为"' + row.userName + '"的用户?')
    .then(function () {
      return forceLogout(row.tokenId)
    })
    .then(() => {
      gGetList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}

</script>
